<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <span class="side" style="margin-left: 15px">上一步</span>
<!--        <img src="../../assets/返回.png" alt="">-->
<!--        <span class="side">返回</span>-->
      </div>
      <div class="div">
        <span>评定信息录入</span>
      </div>
      <div class="div">
        <span class="side" @click="next">下一步</span>
      </div>
    </header>
    <div class="menu">
      <el-steps :active="menuIndex" align-center>
        <el-step title="" v-for="(item, index) in  menuList" :key="index"
                 @click.native="changeMenu(index, url)"
                 process-status="success"
                 :description="item.title">
          <template #icon>
            <div v-if="menuIndex >= index" style="width: 15px;height: 15px;">
              <img src="../../assets/步骤选择.png" style="width: 15px;height: 15px;" alt="">
            </div>
            <div v-else style="width: 6px;height: 15px;background: #1DA4F2;display: flex;align-items: center;justify-content: center">
              <a style="width: 6px;height: 6px;border-radius: 50%;background: white;display: flex;position: absolute;"></a>
            </div>
          </template>
        </el-step>
      </el-steps>
    </div>
    <div class="peopletitle" >
      <img :src="peopleList.PHOTO" v-if="peopleList.PHOTO !== null && peopleList.PHOTO !== undefined && peopleList.PHOTO !== ''" alt="">
      <img v-else src="../../assets/photo.png" alt="">
      <span>{{peopleList.name}}</span>
      <span>|</span>
      <span v-show="peopleList.SEX == 1 || peopleList.sex == 1">男</span>
      <span v-show="peopleList.SEX == 2 || peopleList.sex == 2">女</span>
      <span>|</span>
      <span>{{peopleList.age}} 岁</span>
    </div>
    <div class="title" style="display: flex;align-items: center;justify-content: space-between">
      <p class="p_li zhenduan_p" @click="laiyuanPicker = true">
        <span><a class="hengGang"></a>评定来源</span>
        <span style="display: flex;align-items: center">
          <input style="margin-right: 10px" readonly type="text" v-model="assess_typeText" placeholder="请选择评定来源">
          <img style="margin: 0 8px" src="../../assets/下弹灰@2x.png" alt="">
        </span>
      </p>
<!--      <span style="display: flex;align-items: center">-->
<!--        <a class="hengGang"></a>-->
<!--        <span>请选择评定来源</span>-->
<!--      </span>-->
<!--      <span style="margin-right: 15px;color: #999999;font-size: 15px;font-weight: 500">请选择评定来源</span>-->
    </div>
<!--    <div class="divSelect">
      <div>
        <img v-if="assess_type == 3"  @click="clickSelect(3)" src="../../assets/评估已选择.png" alt="">
        <img v-else src="../../assets/评估未选择.png"  @click="clickSelect(3)" alt="">
        <span  @click="clickSelect(3)">居家</span>
      </div>
      <div >
        <img v-if="assess_type == 1" @click="clickSelect(1)" src="../../assets/评估已选择.png" alt="">
        <img v-else src="../../assets/评估未选择.png" @click="clickSelect(1)" alt="">
        <span @click="clickSelect(1)">门诊</span>
      </div>
      <div >
        <img v-if="assess_type == 2" @click="clickSelect(2)" src="../../assets/评估已选择.png" alt="">
        <img v-else src="../../assets/评估未选择.png" @click="clickSelect(2)" alt="">
        <span @click="clickSelect(2)">住院</span>
      </div>
    </div>-->
    <div class="content">
      <p class="p_li zhenduan_p" >
        <span><a class="hengGang"></a>评定人员</span>
        <span style="display: flex;align-items: center">
          <input style="margin-right: 10px" type="text" v-model="assess_user_name" placeholder="请填写评定人员姓名">
        </span>
      </p>
      <p class="p_li zhenduan_p" @click="(assess_type == 1 || assess_type == 2 || assess_type == 5) ? showPicker = true : showPicker = false">
        <span><a class="hengGang"></a>初步诊断</span>
        <span style="display: flex;align-items: center">
          <input type="text" v-model="diagnose" :readonly="(assess_type == 1 || assess_type == 2 || assess_type == 5)" placeholder="请选择初步诊断">
          <img style="margin: 0 8px" src="../../assets/下弹灰@2x.png" alt="">
        </span>
      </p>
      <p class="p_li">
        <span><a class="hengGang"></a>目前状况</span>
      </p>
      <div class="textareaDiv">
        <textarea maxlength="100" v-model="current_status" placeholder="请输入目前状况">
      </textarea>
        <input type="text" class="maxLen" readonly placeholder="限100字以内" />
      </div>
    </div>
    <van-popup v-model="showPicker" round position="bottom" >
        <van-picker show-toolbar
                    @cancel="showPicker = false"
                    @confirm="onConfirm"
                    :columns="columns"
                    title="初步诊断选项"
                    :default-index="defaultIndex"
                    :loading="loading" >
          <template #columns-top>
              <div class="search">
              <form action="/">
                <van-search
                  v-model="value"
                  show-action
                  placeholder="请输入初步诊断"
                  @search="onSearch"
                  @keyup="onSearch"
                  @clear="onSearch"
                  @change="onSearch"
                  shape="round"
                >
                  <template #action>
<!--                    <div @click="onSearch">搜索</div>-->
                  </template>
                </van-search>
              </form>
            </div>
          </template>
<!--          <van-empty image="search" v-show="searchShow === true" description="请进行初步诊断搜索" />-->
        </van-picker>
      </van-popup>
<!--    <van-dialog v-model="backShow"-->
<!--                width="80%"-->
<!--                confirm-button-color="#1da4f2"-->
<!--                title="该记录未保存，是否确认退出？"-->
<!--                @confirm="backConfirm()"-->
<!--                show-cancel-button>-->
<!--    </van-dialog>-->

    <van-popup v-model="laiyuanPicker" round position="bottom" >
      <van-picker show-toolbar
                  @cancel="laiyuanPicker = false"
                  @confirm="laiyuanonConfirm"
                  :columns="laiyuancolumns"
                  title="评估来源"
                  :default-index="laiyuanIndex"
                   >
      </van-picker>
    </van-popup>
  </div>
</template>

<script>
import {Toast} from 'vant'
export default {
  name: 'EnterPingGu',
  data () {
    return {
      assess_type: 3,
      diagnose: '',
      columns: [],
      zhuangKuang: '',
      value: '',
      loading: false,
      showPicker: false,
      current_status: '',
      isXiu: false,
      role: '',
      backShow: false,
      defaultIndex: 0,
      menuIndex: 1,
      menuList: [
        {
          title: '选择人员',
          url: '/selectAssessor'
        },
        {
          title: '信息录入',
          url: '/enterPingGu'
        },
        {
          title: '选择类型',
          url: '/assessmentType'
        },
        {
          title: '选择量表',
          url: '/selectionAssessment'
        },
        {
          title: '量表填写',
          url: '/assessmentScale'
        }
      ],
      assess_user_name: '',
      laiyuanPicker: false,
      laiyuancolumns: [
        {
          text: '门诊专业评定',
          id: 1
        }, {
          text: '住院专业评定',
          id: 2
        }, {
          text: '居家自评',
          id: 3
        }, {
          text: '居家非专业医疗人士评定',
          id: 4
        }, {
          text: '居家专业医疗人士评定',
          id: 5
        }
      ],
      assess_typeText: '',
      laiyuanIndex: 0,
      peopleList: []
    }
  },
  mounted () {
    this.getZhenduan()
    // 初步诊断
    this.diagnose = sessionStorage.getItem('diagnose')
    // 目前状况
    this.current_status = sessionStorage.getItem('current_status')
    // 初步诊断位置
    this.defaultIndex = sessionStorage.getItem('defaultIndex')
    this.assess_user_name = sessionStorage.getItem('assess_user_name')

    if (this.diagnose === null || this.diagnose === undefined || this.diagnose === '') {
      this.diagnose = ''
    }
    if (this.current_status === null || this.current_status === undefined || this.current_status === '') {
      this.current_status = ''
    }
    if (this.defaultIndex === null || this.defaultIndex === undefined || this.defaultIndex === '') {
      this.defaultIndex = ''
    }
    if (this.assess_user_name === null || this.assess_user_name === undefined || this.assess_user_name === '') {
      this.assess_user_name = ''
    }

    // 是否允许修改来源
    if (sessionStorage.getItem('assess_type') === '' || sessionStorage.getItem('assess_type') === null || sessionStorage.getItem('assess_type') === undefined) {
      this.isXiu = true
    } else {
      this.isXiu = sessionStorage.getItem('isXiu')
      this.assess_type = sessionStorage.getItem('assess_type')
    }
    this.role = Number(sessionStorage.getItem('role'))
    for (let i in this.laiyuancolumns) {
      if (Number(this.laiyuancolumns[i].id) === Number(this.assess_type)) {
        this.assess_typeText = this.laiyuancolumns[i].text
        this.laiyuanIndex = i
        break
      }
    }
    this.ACCEPT_USER_ID = sessionStorage.getItem('ACCEPT_USER_ID')
    this.getPerson()
  },
  methods: {
    // 获取个人基本信息
    getPerson () {
      this.$http.findUserXinXiTuoMin({'data_user_id': this.ACCEPT_USER_ID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.peopleList = res.data.data
            console.log(this.peopleList)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 来源选择确认按钮
    laiyuanonConfirm (value) {
      this.assess_type = value.id
      this.assess_typeText = value.text
      this.laiyuanPicker = false
    },
    backConfirm () {
      // 返回上一页
      this.$router.go(-1)
      this.backShow = false
    },
    // 点击返回
    back () {
      this.$router.go(-1)
      // this.backShow = true
    },
    // 下一步
    next () {
      if (this.assess_type === '' || this.assess_type === undefined || this.assess_type === null) {
        Toast('请选择评定来源')
        return false
      }
      if (this.assess_user_name === '' || this.assess_user_name === undefined || this.assess_user_name === null) {
        Toast('请输入评定人员姓名')
        return false
      }
      // else if (this.current_status === '' || this.current_status === undefined || this.current_status === null || this.current_status.length <= 0) {
      //   Toast('请输入目前状况')
      //   return false
      // }
      // if (this.role === 2) {
      //   if (this.diagnose === '' || this.diagnose === undefined || this.diagnose === null) {
      //     Toast('请选择初步诊断')
      //     return false
      //   }
      // }

      this.$router.push({path: '/assessmentType', query: {'type': this.$route.query.type}})
      // 类别 （门诊、住院、居家）
      sessionStorage.setItem('assess_type', this.assess_type)
      // 评定人员姓名
      sessionStorage.setItem('assess_user_name', this.assess_user_name)
      // 初步诊断
      sessionStorage.setItem('diagnose', this.diagnose)
      // 目前状况
      sessionStorage.setItem('current_status', this.current_status)
      // 是否允许修改
      sessionStorage.setItem('isXiu', this.isXiu)
      // 初步诊断选择的位置
      sessionStorage.setItem('defaultIndex', this.defaultIndex)

      // 下一个页面的 评估类型
      sessionStorage.removeItem('assessid')
    },
    // 点击选择
    clickSelect (num) {
      // if (sessionStorage.getItem('assess_type') === '' || sessionStorage.getItem('assess_type') === null || sessionStorage.getItem('assess_type') === undefined) {
      //   this.assess_type = num
      // } else {
      //   return false
      // }
      if (this.isXiu === true || this.isXiu === 'true') {
        this.assess_type = num
      } else {
        console.log(this.isXiu)
        return false
      }
    },
    // 初步诊断搜索按钮
    onSearch (val) {
      console.log(this.value)
      if (this.value === '' || this.value === undefined) {
        // Toast('请输入初步诊断关键字')
        this.getZhenduan()
      } else {
        this.loading = true
        this.getZhenduan()
      }
    },
    // 选择初步诊断信息的确定按钮
    onConfirm (value, index) {
      this.defaultIndex = index
      this.diagnose = value
      this.showPicker = false
    },
    // 获取诊断
    getZhenduan () {
      this.$http.getDiagnoseList({key: this.value})
        .then(res => {
          console.log(res)
          this.columns = []
          if (res.data.status === 'success') {
            for (var i = 0; i < res.data.data.length; i++) {
              this.columns.push(res.data.data[i].name)
            }
          }
          this.loading = false
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    /*background: #FAF9FE;*/
  }
  header{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E5E5;
  }
  .div{
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .div:nth-child(2) {
    justify-content: center;
  }
  .div:nth-child(3) {
    justify-content: flex-end;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .side{
    color: #1da4f2;
  }
  .divSelect{
    width: 95%;
    height: 60px;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
    border-radius: 5px;
    margin: 10px auto;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
  }
  .divSelect img{
    width: 16px;
    height: 16px;
    /*margin: 0 8px 0 15px;*/
    margin-right: 8px;
  }
  .divSelect div{
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content{
    background: white;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    padding-bottom: 10px;
  }
  .p_li{
    width: 100%;
    height: 44px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
  }
  .p_li span {
    display: flex;
    align-items: center;
  }
  .p_li span:first-child{
    /*font-weight: bold;*/
  }
  .p_li img{
    width: 13px;
    height: 7px;
  }
  .p_li input,
  .maxLen{
    border: none;
    text-align: right;
    font-size: 15px;
  }
  .p_li input::placeholder{
    color: #999999;
  }
  .zhenduan_p{
    border-bottom: 1px solid #E5E5E5;
  }
  .maxLen{
    font-size: 11px;
    float: right;
    background: none;
  }
  .textareaDiv{
    width: 95%;
    height: 150px;
    background: #FAF9FE;
    border-radius: 10px;
    margin: 10px 2%;
    padding: 5px 10px;
    box-sizing: border-box;
    font-size: 15px;
  }
  textarea{
    width: 100%;
    height: 80%;
    background: #FAF9FE;
    border: none;
    overflow: auto;
    resize: none;
  }
  /deep/  .search .van-field__control{
    font-size: 15px !important;
    font-weight: 500;
  }
  /deep/ .van-search{
    font-size: 15px !important;
    font-weight: bold;
  }
  /deep/ .van-search__action{
    font-size: 15px;
    color: #1da4f2;
    font-weight: bold;
  }
  /deep/ .van-picker__confirm{
    font-size: 15px;
    color: #1da4f2;
    font-weight: bold;
  }
  /deep/ .van-picker__cancel{
    font-size: 15px;
    font-weight: bold;
  }
  /deep/ .van-picker-column__item--selected{
    font-size: 19px !important;
    color: #1DA4F2;
  }
  /deep/ .van-search__action{
    font-size: 15px;
  }
  .title{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    background: #ffffff;
  }
  .hengGang{
    display: block;
    width: 2px;
    border-radius: 1px;
    height: 15px;
    background: #1DA4F2;
    margin: 0 8px 0 15px;
  }
  .menu{
    width: 100%;
    height: 60px;
    background: #1DA4F2;
    box-shadow: 0px 1px 0px 0px #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow:hidden;
  }
  /*/ 选择框 开始样式/*/
  /deep/ .el-steps--horizontal{
    width: 105%;
  }
  /deep/ .el-step.is-center .el-step__description{
    padding: 0;
  }
  /deep/ .el-step__description{
    margin: 0;
    font-size: 13px;
  }
  /deep/ .el-step__icon{
    width: auto;
    height: auto;
  }
  /deep/ .el-step__icon.is-text{
    border: none;
  }
  /deep/ .is-finish,
  /deep/ .el-step__description.is-process{
    color: #fff;
  }
  /deep/ .el-step__description.is-finish{
    color: white !important;
  }
  /deep/ .el-step__description.is-wait{
    color: rgba(255, 255, 255, 0.7);
  }
  /deep/ .el-step__head.is-finish{
    border-color: #fff;
  }
  /deep/ .el-step__head.is-wait{
    border-color: transparent !important;
  }
  /deep/ .el-step__line{
    border-color: transparent !important;
  }
  /deep/ .el-step.is-horizontal .el-step__line{
    height: 1px;
    /*top:7px;*/
    top: 35%;
  }
  /deep/ .el-step__line{
    background: white;
  }
  /*/ 选择框 结束样式/*/

  .peopletitle{
    width: 92%;
    height: 50px;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
    color: white;
    margin: 10px auto 5px auto;
    border-radius: 10px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .peopletitle span{
    margin-left: 5px;
  }
  .peopletitle img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
  }
</style>
